<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
</head>

<body>
    <canvas class="webgl"></canvas>
    <script type="module">
        import '../js/three.js';
        import { GLTFLoader } from '../js/GLTFLoader.js';
        import { OrbitControls } from '../js/OrbitControls.js';
        import Stats from '../js/stats.module.js';
        var stats = new Stats();
        stats.showPanel(1); // 0: fps, 1: ms, 2: mb, 3+: custom
        document.body.appendChild(stats.dom);

        let INTERSECTED;

        const canvas = document.querySelector(".webgl");
        const sizes = {
            width: window.innerWidth,
            height: window.innerHeight
        }
        // Scene
        const scene = new THREE.Scene()

        // 环境光
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.8)
        scene.add(ambientLight)

        // 方向光
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
        directionalLight.position.set(2, 2, -1)
        scene.add(directionalLight)

        let texture = new THREE.TextureLoader().load("../imgs/floor-3.jpg");
        let texture2 = new THREE.TextureLoader().load("../imgs/floor.jpg");
        // texture.wrapS = THREE.RepeatWrapping;

        const bottom = new THREE.BoxGeometry(100, 100, 0.1);
        const bottomMaterial = new THREE.MeshPhysicalMaterial({
            // color: '#1aad19',
            metalness: 0.3,
            roughness: 0.5,
            // transmission: 0.9
            map: texture,
            //材质背面显示
            side: texture2,
        });

        //加载模型
        let loader = new GLTFLoader();
        loader.load("../models/fried_chicken_wings_01/scene.gltf", (gltf) => {
            console.log(gltf, 'gltf>>>>');
            gltf.scene.traverse(function (child) {
                if (child.isMesh) {
                    child.geometry.center(); // center here
                }
            });
            gltf.scene.position.y = 10
            gltf.scene.scale.set(300, 300, 300) // scale here
            scene.add(gltf.scene);
        });


        const plane = new THREE.Mesh(bottom, bottomMaterial);
        plane.rotation.x = -Math.PI * 0.5;
        scene.add(plane);

        // 设置相机
        const camera = new THREE.PerspectiveCamera(
            75,
            sizes.width / sizes.height,
            1,
            1000
        )
        camera.position.x = 0
        camera.position.y = 100
        camera.position.z = 0

        scene.add(camera)


        // 渲染器
        const renderer = new THREE.WebGLRenderer({
            canvas
        })
        renderer.setSize(sizes.width, sizes.height)
        renderer.render(scene, camera)

        // 控制器
        const controls = new OrbitControls(camera, canvas)



        const raycaster = new THREE.Raycaster();
        const pointer = new THREE.Vector2();
        // 监听点击
        function clickHandler(e) {
            // 归一化点击坐标  有点像四象限  x,y 的范围是 -1 ~ 1
            pointer.x = (e.clientX / window.innerWidth) * 2 - 1;
            pointer.y = -(e.clientY / window.innerHeight) * 2 + 1;
            console.log(e.clientX, e.clientY, 'xxxx');
            // console.log( pointer.x,  pointer.y, 'xxxx');
        }
        // window.addEventListener("pointermove", clickHandler)
        window.addEventListener("click", clickHandler)

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);

        }
        window.addEventListener('resize', onWindowResize);


        const tick = () => {
            stats.begin();

            controls.update();
            renderer.render(scene, camera)
            renderer.setPixelRatio(window.devicePixelRatio);
            camera.updateMatrixWorld();

            // find intersections
            raycaster.setFromCamera(pointer, camera);
            let intersects = raycaster.intersectObjects(scene.children, false);

            // console.log(intersects, 'scene.children');
            if (intersects.length > 0) {
                if (INTERSECTED != intersects[0].object) {
                    if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
                    INTERSECTED = intersects[0].object;
                    INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
                    INTERSECTED.material.emissive.setHex(0xff0000);
                }

            } else {
                if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
                INTERSECTED = null;
            }

            renderer.render(scene, camera);

            stats.end();
            requestAnimationFrame(tick)
        }
        tick();
    </script>
</body>

</html>